<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Masses and Springs</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Helper Functions ---
    /**
     * Draws an arrowhead at a specified point.
     * @param {CanvasRenderingContext2D} context The canvas rendering context.
     * @param {number} tox The x-coordinate of the arrowhead tip.
     * @param {number} toy The y-coordinate of the arrowhead tip.
     * @param {number} angle The angle of the arrow in radians.
     */
    function drawArrowhead(context, tox, toy, angle) {
        const headlen = 10; // length of head in pixels
        context.beginPath();
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        context.moveTo(tox, toy);
        context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        context.stroke();
    }

    /**
     * Draws a sawtooth-style spring.
     * @param {CanvasRenderingContext2D} context The canvas rendering context.
     * @param {number} x_start The starting x-coordinate of the spring.
     * @param {number} y_center The y-coordinate of the spring's axis.
     * @param {number} length The total length of the spring.
     * @param {number} num_teeth The number of "teeth" or coils.
     * @param {number} tooth_height The amplitude of the teeth.
     */
    function drawSpring(context, x_start, y_center, length, num_teeth, tooth_height) {
        context.beginPath();
        context.moveTo(x_start, y_center);
        const segment_width = length / num_teeth;
        for (let i = 0; i < num_teeth; i++) {
            const x_base = x_start + i * segment_width;
            context.lineTo(x_base + segment_width * 0.2, y_center);
            context.lineTo(x_base + segment_width * 0.5, y_center - tooth_height);
            context.lineTo(x_base + segment_width * 0.8, y_center);
        }
        context.lineTo(x_start + length, y_center);
        context.stroke();
    }


    // --- Main Drawing ---

    // Define coordinates and dimensions
    const origin = { x: 60, y: 200 };
    const xAxisLength = 380;
    const yAxisHeight = 160;

    // 1. Draw Coordinate Axes
    ctx.beginPath();
    // X-axis
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(origin.x + xAxisLength, origin.y);
    // Y-axis
    ctx.moveTo(origin.x, origin.y + 20);
    ctx.lineTo(origin.x, origin.y - yAxisHeight);
    ctx.stroke();

    // Arrowheads for axes
    drawArrowhead(ctx, origin.x + xAxisLength, origin.y, 0); // X-axis
    drawArrowhead(ctx, origin.x, origin.y - yAxisHeight, -Math.PI / 2); // Y-axis

    // Labels for axes
    ctx.font = 'italic 22px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('O', origin.x - 20, origin.y + 15);
    ctx.fillText('x', origin.x + xAxisLength + 15, origin.y);

    // 2. Draw Blocks
    const block = { w: 50, h: 40 };
    const springLen = 50;
    const blockA_x = origin.x + 90;
    const block_y = origin.y - block.h;
    const blockB_x = blockA_x + block.w + springLen;
    const blockC_x = blockB_x + block.w + springLen;

    ctx.beginPath();
    ctx.strokeRect(blockA_x, block_y, block.w, block.h);
    ctx.strokeRect(blockB_x, block_y, block.w, block.h);
    ctx.strokeRect(blockC_x, block_y, block.w, block.h);
    ctx.stroke();

    // Labels for blocks
    ctx.font = '22px serif';
    ctx.fillText('A', blockA_x + block.w / 2, block_y + block.h / 2);
    ctx.fillText('B', blockB_x + block.w / 2, block_y + block.h / 2);
    ctx.fillText('C', blockC_x + block.w / 2, block_y + block.h / 2);

    // 3. Draw Springs
    const spring_y = origin.y;
    const tooth_height = 10;
    const num_teeth = 5;
    drawSpring(ctx, blockA_x + block.w, spring_y, springLen, num_teeth, tooth_height);
    drawSpring(ctx, blockB_x + block.w, spring_y, springLen, num_teeth, tooth_height);

    // 4. Draw Force F
    const force_y = origin.y;
    const force_start_x = origin.x - 30;
    const force_end_x = blockA_x;
    
    // Vertical bar for force origin
    ctx.beginPath();
    ctx.moveTo(force_start_x, force_y - 15);
    ctx.lineTo(force_start_x, force_y + 15);
    ctx.stroke();

    // Arrow line for force
    ctx.beginPath();
    ctx.moveTo(force_start_x, force_y);
    ctx.lineTo(force_end_x, force_y);
    ctx.stroke();
    drawArrowhead(ctx, force_end_x, force_y, 0);

    // Label for force
    ctx.font = 'italic 22px serif';
    ctx.fillText('F', force_start_x, force_y - 25);

    // 5. Draw Caption
    ctx.font = '18px serif';
    ctx.fillText('Fig. 1.95.', canvas.width / 2, origin.y + 80);

</script>
</body>
</html>